The way we currently detect extra closing block brackets } is not perfect and still causes issues, because we just ignore them. This however does not match the browsers' behavior. Depending on the case the extra closing brackets might end up as part of the selector. Take a look at the following:

@keyframes mymove {
  from { top: 0px; }
}

#test {
  color: white;
  background: green;
}

body
  background: black;
  }

#test {
  display: block;
  background: red;
  color: white;
}
#test {
  display: block;
  background: white;
  color: black;
}

The body selector is missing an opening { so the selector string will be everything up to the next { found at the first #test { declaration. This makes the selector invalid, so the first definition of #test must be skipped, but parsing must continue. The final tree must include the @keyframes, first #test definition and the last #test definition. The rules in between must be skipped.

This is why I think we should have a selector validation and skip the rule sets for invalid selectors (which matches the browsers' behavior).

The modifications in this PR will change the output of the library, so this change might be considered BC breaking, but I believe it is a move in the right direction. I tried to build the selector validation according to the definition found in this document. More specifically this line In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_);. It is not perfect yet, because it doesn't check for escaped characters, or a valid start of the selector. I might try to add these if we agree that this is a viable approach to the problem.

Let me know what you think.